<template>
  <div style="display: flex;justify-content: center;">
    <el-transfer
      :filter-method="filterMethod"
      v-model="selectCitys"
      :data="citys"
      :props="props"
      :titles="titles"
      filterable
      filter-placeholder="请输入城市拼音"/>
  </div>
</template>

<script>
import { search } from '@/api/city'
var pinyin = require('pinyin')
export default {

  data: function() {
    return {
      citys: [],
      titles: ['所有城市', '已选城市'],
      props: {
        key: 'areaId', label: 'areaName'
      },
      selectCitys: [],
      filterMethod: function(query, item) {
        return pinyin(item.areaName, { style: pinyin.STYLE_FIRST_LETTER }).toString().indexOf(query) > -1
      }
    }
  },
  created: function() {
    search({ level: 2 }).then(res => {
      debugger
      const data = res.map(v => {
        v.disabled = v.enable === 'OPEN'
        return v
      })
      this.citys = data
    })
  },
  methods: {
    getSelect() {
      return this.selectCitys
    }
  }
}
</script>

<style scoped>

</style>
